<%--
  Created by IntelliJ IDEA.
  User: 123
  Date: 2020/12/14
  Time: 11:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
<body>
<a href="javascript:void(0)" id="tuichu">退出</a>
<button class="layui-btn" id="AddBtn">添加</button>
<button class="layui-btn" id="delManyBtn">批量删除</button>
<div id="test2"></div>
<table id="demo" lay-filter="test"></table>
<form class="layui-form" style="display: none" id="1"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item layui-form-text">
        <input type="text" id="upload" hidden="hidden" value="" name="productImage">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="test1">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="go">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script src="layui/layui.js"></script>
<script>
    if (${sessionScope.user==null}){
        location="login.jsp"
    }
    layui.use(['table','layer','upload','form','tree'], function(){
        var table = layui.table;
        var layer=layui.layer;
        var upload=layui.upload;
        var form=layui.form;
        var tree=layui.tree;
        //第一个实例
        table.render({
            elem: '#demo'
            ,url: 'products' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {type:"checkbox"},
                {field: 'bookId', title: 'ID'}
                ,{field: 'bookName', title: '书名'}
                ,{field: 'bookPrice', title: '价格'}
                ,{field: 'author', title: '作者'}
                ,{field: 'press', title: '出版社'},
                {title:"图片",templet:function (d) {
                        return '<img src="'+d.productImage+'">'
                    }}
                ,{title:'操作',templet:'#barDemo'}
            ]]
        });
        $("#delManyBtn").click(function () {
            var checkStatus=table.checkStatus("demo");
            var jsonArray=[]
            if (checkStatus.data.length!=0){
                for (var i=0;i<checkStatus.data.length;i++){
                    jsonArray.push(checkStatus.data[i].bookId)
                }
            }else{
                layer.msg("请选中行")
            }
            $.ajax({
                url:"products",
                data:JSON.stringify(jsonArray),
                contentType:"application/json",
                type:"delete",
                success:function () {
                    table.reload("demo",{
                        page:{
                            curr:1
                        }
                    });
                }
            })
        })
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: 'uploads' //上传接口
            ,done: function(res){
                if (res.code==0){
                    var filename=res.src;
                    var name=res.msg;
                    console.log(name)
                    $("#upload").val(name)
                }
            }
            ,error: function(){
                //请求异常回调
            }
        });
        $("#AddBtn").click(function () {
            layer.open({
                type: 1,
                content: $("#1") //这里content是一个普通的String
            });
        })
        form.on('submit(go)', function(data){
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            var data=data.field;
            $.ajax({
                url:"products",
                contentType:"application/json",
                data:JSON.stringify(data),
                type:"post",
                success:function (data) {
                    layer.closeAll();
                    table.reload("demo")
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        $("#tuichu").click(function () {
            $.ajax({
                url:"tuichu",
                success:function (data) {
                    location="login.jsp"
                }
            })
        })
        layui.use('tree', function(){
            var tree = layui.tree;
            //发出ajax请求
            $.ajax({
                url:"depts",
                dataType:"json",
                success:function(data){
                    //渲染
                    tree.render({
                        elem: '#test2'  //绑定元素
                        ,click: function(obj){
                            console.log(obj.data); //得到当前点击的节点数据
                            console.log(obj.data.children); //当前节点下是否有子节点
                        }
                        ,data:data
                    });
                }
            });
        });
    });
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
</html>
